<template>
  <div>
    <!-- 找车辆 -->
    <div style="display: flex;justify-content: space-between;padding: 19px 20px;">
      <img :src="source.vehicleCoverPicture
          ? source.vehicleCoverPicture
          : $img + source.houseImageDiv
        " style="width: 30%;cursor: pointer;height:85px;object-fit: contain;background-color: rgb(209 204 204 / 20%);"
        @click="housedetails(source)" alt />
      <div style="width: 65%;display: flex;flex-direction: column;justify-content: space-between;">
        <div class="biaoti" @click="housedetails(source)">
          <tag-view :item="source"></tag-view>{{
            source.vehicleBrandModel.split("|")[0] +
            " " +
            (source.vehicleBrandModel.split("|")[1] || "")
          }}
          {{ source.model || "" + "/" || "" }}
          {{
            source.bodyStructureDoors +
            "门" +
            source.bodyStructureSeat +
            "座" +
            source.bodyStructureVehicle +
            "车"
          }}
        </div>
        <div style="color: #666666;font-size: 14px;font-weight: 400;margin-top: 8px;margin-bottom: 8px;">
          {{
            source.mileage
            ? +source.mileage >= 10000
              ? +(source.mileage / 10000).toFixed(1) + "万公里/"
              : source.mileage + "公里/"
            : ""
          }}{{
  source.licensingTimeYear ? source.licensingTimeYear + "年" : ""
}}
        </div>
        <div style="flex-grow: 1;display: flex;justify-content: flex-end;align-items: center; margin-bottom: 8px;">
          <div style="color: #E00000;font-size: 20px;font-weight: 600;">
            {{
              source.intervalPrice && source.intervalPrice != ""
              ? source.intervalPrice.indexOf("-") > -1
                ? source.intervalPrice.split("-")[0] +
                "-" +
                source.intervalPrice.split("-")[1] +
                "万"
                : ""
              : source.price
                ? source.price + "万"
                : ""
            }}
          </div>
        </div>
        <div style="display: flex;align-sources: center;">
          <img style="width: 21px;height: 21px;border-radius: 21px;cursor: pointer;" :src="source.userInformation
              ? source.userInformation.image ||
              'https://pic.bangbangtongcheng.com/static/my/header.png'
              : 'https://pic.bangbangtongcheng.com/static/my/header.png'
            " @click="toAgent(source)" />
          <div class="name" @click="toAgent(source)">
            {{
              source.userInformation
              ? source.userInformation.nikeName || "未命名用户"
              : "未命名用户"
            }}
          </div>

          <div style="cursor: pointer" class="dianpu" @click="shopdetails(source)">
            {{
              source.distributor && source.distributor.storeName
              ? source.distributor.storeName
              : "个人车源"
            }}
          </div>
        </div>
      </div>
      <!-- <div style="width: 16%;display: flex;flex-direction: column;justify-content: center;">
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    index: {
      type: Number
    },
    source: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    housedetails(item) {
      this.openUrl({
        path: "/index/newSourceDetails",
        query: {
          id: item.id
        }
      });
      return;
      if (item.transactionType == 1) {
        const routeLink = this.$router.resolve({
          path: "/index/leaseDetails?id=" + item.id
        });
        window.open(routeLink.href, "_blank");
      } else {
        const routeLink = this.$router.resolve({
          path: "/index/newHouseDetails?id=" + item.id
        });
        window.open(routeLink.href, "_blank");
      }
    }
  }
};
</script>

<style lang="less" scoped>
.biaoti {
  color: #333333;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.name {
  line-height: 23px;
  width: 30%;
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  margin-left: 6px;
  margin-right: 12px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.dianpu {
  color: #64b6a8;
  font-size: 13px;
  font-weight: 400;
  padding: 2px 8px;
  border: 1px solid #64b6a8;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
</style>
